<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    :canFullscreen="false"
    @register="register"
    :title="topic"
    @visible-change="handleShow"
  >
    <template #footer>
      <!-- <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button> -->
    </template>
    <div class="mx-15px">
      <div
        class="flex items-center videoNull"
        v-for="(item, index) in lines"
        :key="index"
        :class="{ 'mt-10px': index != 0 }"
      >
        <div
          class="flex border-1 rounded-lg border-gray-500/20 items-center pl-10px py-7px"
          style="flex: 4"
        >
          <div class="rounded-lg px-10px pt-7px pb-5px bg-blue-500/15"
            ><AppstoreFilled class="text-xl"
          /></div>
          <div class="ml-15px">{{ item.name }}</div>
        </div>
        <div class="flex justify-between ml-15px" style="flex: 1.5">
          <EditFilled class="text-xl" />
          <DeleteFilled class="text-xl" />
          <ColumnHeightOutlined
            class="text-xl cursor-move"
            draggable="true"
            @dragstart="dragstart($event, index)"
            @dragenter="dragenter($event, index)"
            @dragend="dragend"
            @dragover="dragover"
          />
        </div>
      </div>
      <div
        v-show="!addIsshow"
        @click="addget"
        class="border-dashed border border-gray-500/50 rounded-lg flex items-center justify-center py-15px mt-15px cursor-pointer"
      >
        <PlusOutlined />
      </div>

      <div
        class="border-1 rounded-lg border-gray-500/20 items-center px-10px py-8px mt-15px"
        v-show="addIsshow"
      >
        <Input v-model:value="addValue" placeholder="快速链接" />
        <div class="flex justify-end mt-10px">
          <a-button
            type="link"
            class="ml-10px"
            @click="
              () => {
                addIsshow = false;
                addValue = '';
              }
            "
          >
            取消
          </a-button>
          <a-button type="primary" class="ml-10px"> 加 </a-button>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import {
    AppstoreFilled,
    EditFilled,
    DeleteFilled,
    ColumnHeightOutlined,
    PlusOutlined,
  } from '@ant-design/icons-vue';
  import { Input } from 'ant-design-vue';

  export default defineComponent({
    components: {
      BasicModal,
      AppstoreFilled,
      EditFilled,
      DeleteFilled,
      ColumnHeightOutlined,
      PlusOutlined,
      Input,
    },
    setup() {
      const topic = ref();
      const lines = ref<any>();
      const dragIndex = ref<any>();
      const addIsshow = ref(false);
      const [register, { redoModalHeight }] = useModalInner((data) => {
        topic.value = data.title;
        lines.value = data.arr;
      });
      const addValue = ref();

      watch(
        () => lines.value,
        () => {
          redoModalHeight();
        },
      );

      function handleShow(visible: boolean) {
        if (visible) {
          // loading.value = true;
          // setModalProps({ loading: true, confirmLoading: true });
          // setTimeout(() => {
          //   lines.value = Math.round(Math.random() * 30 + 5);
          //   loading.value = false;
          //   setModalProps({ loading: false, confirmLoading: false });
          // }, 3000);
          // lines.value = ;
        }
      }

      function dragstart(e, index) {
        e.stopPropagation();
        dragIndex.value = index;
        setTimeout(() => {
          e.target.classList.add('moveing');
        }, 0);
      }

      function dragenter(e, index) {
        e.preventDefault();

        // outer = Array.from(outer);
        // outer.forEach(function (item) {
        //   item.ondragover = dragover;
        // });
        // 拖拽到原位置时不触发
        if (dragIndex.value !== index) {
          const source = lines.value[dragIndex.value];
          lines.value.splice(dragIndex.value, 1);
          lines.value.splice(index, 0, source);

          // 更新节点位置
          dragIndex.value = index;
        }
      }

      function dragover(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
      }
      function dragend(e) {
        e.target.classList.remove('moveing');
      }
      function addget() {
        addIsshow.value = !addIsshow.value;
      }

      return {
        register,
        handleShow,
        lines,
        topic,
        dragstart,
        dragenter,
        dragover,
        dragend,
        dragIndex,
        addIsshow,
        addValue,
        addget,
      };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>
